<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
<!--静态文件引用-->
{% load staticfiles %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}


<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class="col-9">
            <div class="alert alert-success">作者：{{ article.author }}

                <!--                <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>-->
                <!--                <div class="col-12 alert alert-success">-->


                {% if user == article.author %}
                <a href="#" onclick="confirm_safe_delete()">删除文章</a>
                <a href="{% url 'article:article_update' article.id %}">编辑文章</a>
                <!-- 新增一个隐藏的表单 -->
                {% endif %}


                <div>
                    浏览：{{ article.total_views }}
                </div>
                <form
                        style="display:none;"
                        id="safe_delete"
                        action="{% url 'article:article_safe_delete' article.id %}"
                        method="POST"
                >
                    {% csrf_token %}
                    <button type="submit">发送</button>
                </form>

            </div>
        </div>
        <!-- 新增的目录 -->
        <div class="col-3 mt-4">
            <h4><strong>目录</strong></h4>
            <hr>
            <div>
                {{ toc|safe }}
            </div>
        </div>

        <!-- 文章正文 -->
        <div class="col-12">
            <!--            <p>{{ article.body }}</p>-->
            <!--p            # 在 article.body 后加上 |safe 过滤器-->
            <p>{{ article.body|safe }}</p>
        </div>

        <!-- 发表评论 -->
        <hr>
        {% if user.is_authenticated %}
        <div class="col-12">
            <form
                    action="{% url 'comment:post_comment' article.id %}"
                    method="POST"
            >
                {% csrf_token %}
                <div class="form-group">
                    <label for="body">
                        <strong>
                            我也要发言：
                        </strong>
                    </label>
                    <textarea
                            type="text"
                            class="form-control"
                            id="body"
                            name="body"
                            rows="2"></textarea>
                </div>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary ">发送</button>
            </form>
        </div>
        <br>
        {% else %}
        <br>
        <h5 class="row justify-content-center">
            请<a href="{% url 'userprofile:login' %}">登录</a>后回复
        </h5>
        <br>
        {% endif %}


        <!-- 显示评论 -->
        <h4>共有{{ comments.count }}条评论</h4>
        <div>
            {% for comment in comments %}
            <hr>
            <p>
                <strong style="color: pink">
                    {{ comment.user }}
                </strong> 于
                <span style="color: green">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 时说：
            </p>
            <pre style="font-family: inherit; font-size: 1em;">
{{ comment.body }}</pre>
            {% endfor %}
        </div>
    </div>



</div>


<script>
function confirm_safe_delete() {
    layer.open({
        title: "确认删除",
        content: "确认删除这篇文章吗？",
        yes: function(index, layero) {
            $('form#safe_delete button').click();
            layer.close(index);
        }
    })
}

</script>

{% endblock content %}